<template>
  <view>
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="welcome-msg">Hi~,\n 欢迎来到XXXX</text>
			<text class="bg-msg">Text Helper</text>
      <image src="/static/rebot1.gif"></image>
    </view>
    <view class="container">
      <!-- 主要功能区 -->
      <view class="functions">
        <view class="main-title">
          <text class="icon"></text>
          <text class="text">功能入口</text>
        </view>
        <view class="main-functions">
          <view class="function-button" @click="goToRewrite">
						<text class="icon script-icon"></text>
						文本改写
					</view>
          <!-- <view style="width: 300rpx; border-radius: 30rpx">
            <view style="background: white; font-size: 80rpx"
              >文本<br />改写</view
            >
            <view class="bottom">
              <text>文本改写</text>
              <text>妙笔生花，一键焕新表达！</text>
            </view>
          </view> -->
          <view class="function-button" @click="goToScript">
            <text class="icon text-icon"></text>
            脚本生成
          </view>
        </view>
      </view>

      <!-- 快捷入口 -->
      <view class="quick-access">
        <view class="main-title">
          <text class="icon"></text>
          <text class="text">快捷入口</text>
        </view>
        <view class="enter">
          <view class="enter-item" @click="goToHistory()">历史记录</view>
          <view class="enter-item" @click="goToExample('elegant-rewrite')"
            >示例推荐</view
          >
        </view>
      </view>
    </view>

    <!-- <uni-popup ref="popupRef" type="center" border-radius="10px 10px 0 0">
      <text>
        获取头像balabala~
      </text>
      <view>
        <button @click="getUserProfile">确定</button>
        <button>取消</button>
      </view>
    </uni-popup> -->
  </view>
</template>

<script setup>
import { onLoad, onReady } from "@dcloudio/uni-app";
onLoad(() => {
	wx.login({
		success(res) {
			if(res.code){
				console.log(res.code);
			} else {
				console.log(res.errMsg);
			}
		} 
	})
})
const goToSettings = () => {
  uni.navigateTo({
    url: "/pages/settings/settings",
  });
};

const goToRewrite = () => {
  uni.navigateTo({
    url: "/pages/texttMode/texttMode",
  });
};

const goToScript = () => {
  uni.navigateTo({
    url: "/pages/scriptMode/scriptMode",
  });
};

const goToExample = (exampleType) => {
  uni.navigateTo({
    url: `/pages/example/example?type=${exampleType}`,
  });
};

const goToHistory = () => {
  uni.navigateTo({
    url: "/pages/history/history",
  });
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 300rpx);
  width: 100vw;
  padding: 100rpx 20rpx;
  box-sizing: border-box;
  /* background: linear-gradient(to bottom, #C4DCFA, #f0f0f0); */
  background: #f1f5fb;
}

.navbar {
  background: linear-gradient(to right, #7f5fc3, #3bb6fe);
  height: 300rpx;
  width: 100%;
  position: relative;
  image {
    position: absolute;
    right: 0;
    bottom: -85rpx;
    height: 300rpx;
    width: 300rpx;
  }
  .welcome-msg {
    font-size: 40rpx;
    line-height: 2em;
    position: absolute;
    bottom: 20%;
    left: 15%;
    color: white;
  }
	.bg-msg {
    font-size: 120rpx;
    color: black;
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
	}
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.main-functions {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.main-title {
  margin-bottom: 50rpx;
  display: flex;
  align-items: center;
  .icon {
    width: 60rpx;
    height: 60rpx;
    display: inline-block;
    background: url("../../static/title2.png");
    background-size: 100% 100%;
  }
  .text {
    font-size: 35rpx;
    font-weight: bolder;
  }
}
.function-button {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  /* background-color: #c4dcfa; */
	background: linear-gradient(to right, #c4dcfa, #F8F9FB);
  color: black;
  font-size: 28rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  .icon {
    width: 100rpx;
    height: 100rpx;
    display: inline-block;
    margin-bottom: 20rpx;
  }
  .script-icon {
    background: url("../../static/script-icon.png");
    background-size: 100% 100%;
  }
  .text-icon {
    background: url("../../static/text-icon.png");
    background-size: 100% 100%;
  }
}
.function-button::before,
.function-button::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid #3386f1;
  transition: all 0.5s;
  border-radius: 10px;
  animation: clipPath 3s infinite linear;
}
@keyframes clipPath {
  0%,
  100% {
    clip-path: inset(0 0 98% 0);
  }
  25% {
    clip-path: inset(0 98% 0 0);
  }
  50% {
    clip-path: inset(98% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 98%);
  }
}

.quick-access {
  margin-top: 100rpx;
}
.enter {
  display: flex;
  justify-content: space-around;
  .enter-item {
    background-color: #008cba;
    color: white;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    border-radius: 10rpx;
    background: linear-gradient(315deg, #c4dcfa 0%, #3386f1 74%);
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
      7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  }
}

.history-button {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
}
</style>
